<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="300" height="auto" :left="uiLeft" :top="60">
        <div class="box">
            <div class="item1">
                <div>是否编辑：</div>
                <div class="edit">
                    <el-switch v-model="editingRef" size="small" />
                    <el-button @click.stop="draw"> 重新绘制</el-button>
                </div>
            </div>
            <!-- <div class="item1">
                <div>填充颜色：</div>
                <div class="edit">
                    <el-color-picker v-model="polygonFillColor" show-alpha size="small" />
                </div>
            </div>
            <div class="beizhu">提示：设置贴图会将填充颜色透明度设置为0</div> -->
            <div class="item1">
                <div>贴图：</div>
                <div class="texture-img">
                    <el-input style="width: 140px;" v-model="url" :disabled="true" clearable @clear="url = ''" />
                    <div class="list-img choose" @click="currentDialog = 'url'" title="选择"></div>
                </div>
            </div>
            <div class="beizhu">贴图从资源库获取纹理</div>
            <div class="item1">
                <div>尺寸：</div>
                <div>
                    <el-input-number v-model="size" controls-position="right" :min="0" />
                </div>
            </div>
            <div class="btn1">
                <el-button @click="submit"
                    :disabled="!eSGeoWater || eSGeoWater.editing || !eSGeoWater.points || !eSGeoWater.points.length || !url">创建</el-button>
            </div>
        </div>
    </Dialog>
    <TexturePanel v-if="currentDialog == 'url'" :title="'选择贴图'" :isVisible="true" @close="currentDialog = undefined"
        @confirm="chooseConfirm" />
</template>
<script setup lang="ts">
import { cssColorToXe2Color, extractNumbersFromRGBA, getsceneObjNumfromSceneTree } from "@/scripts/utils";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    createVueDisposer
} from "earthsdk-ui";
import Dialog from "../../components/Dialog.vue";
import { getProjectManager } from "../../scripts/getProjectManager";
import TexturePanel from "@/components/propPanel/modelser/TexturePanel.vue";
import { ESMsWater } from "@/scripts/esobjs/ESMsWater";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const uiLeft = ref(document.body.clientWidth - 10 - 300);

const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};

const d = createVueDisposer(onBeforeUnmount);

const objm = getProjectManager();
const modelser2SceneTreeWrapper = objm.modelser2SceneTreeWrapper;

let eSGeoWater: any = ref();
let editingRef = ref(false);
const polygonFillColor = ref('rgba(10, 233, 245, 0.4)');

const url = ref('');
const size = ref(0);

const currentDialog = ref<any>('');

const create = () => {
    if (eSGeoWater.value) {
        eSGeoWater.value.editing = false
        eSGeoWater.value &&
            objm.destroySceneObject(eSGeoWater.value);
        eSGeoWater.value = undefined;
    }
    eSGeoWater.value = d.ad(objm.createSceneObject(ESMsWater) as ESMsWater);
    d.dispose(() => {
        eSGeoWater.value.editing = false
        eSGeoWater.value && objm.destroySceneObject(eSGeoWater.value);
    });
    editingRef.value = true;
    eSGeoWater.value.waterType = "custom"
    eSGeoWater.value.frequency = 1
    eSGeoWater.value.waveVelocity = 0
    eSGeoWater.value.amplitude = 0.01
    eSGeoWater.value.specularIntensity = 0
    eSGeoWater.value.flowDirection = 0;

    eSGeoWater.value.dispose(eSGeoWater.value.editingChanged.disposableOn((val: any) => {
        editingRef.value = val
    }))
    updateParam();
};

const updateParam = () => {
    const rgba = extractNumbersFromRGBA(polygonFillColor.value)
    eSGeoWater.value.waterColor = cssColorToXe2Color(rgba)
};

// 监听
watch([polygonFillColor], () => {
    updateParam();
});

watch([url, size], (val) => {
    if (!size.value) {
        eSGeoWater.value.waterImage = {
            url: url.value,
        }
    } else {
        eSGeoWater.value.waterImage = {
            url: url.value,
            uDis: size.value,
            vDis: size.value,
        }
    }
    const rgba = extractNumbersFromRGBA(polygonFillColor.value)
    polygonFillColor.value = `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, 0)`

    eSGeoWater.value.textureSize = size.value ?? 0

})

watch(editingRef, (val) => {
    if (!eSGeoWater.value) return;
    eSGeoWater.value.editing = val
})

// 重新绘制
const draw = () => {
    if (eSGeoWater.value.editing) {
        eSGeoWater.value.editing = false;
    }
    eSGeoWater.value.points = [];
    setTimeout(() => {
        eSGeoWater.value.editing = true;
    }, 50);
};

// 选择贴图
const chooseConfirm = (val: any) => {
    currentDialog.value = undefined
    url.value = val.url
    eSGeoWater.value.textureSize = val.textureSize
    eSGeoWater.value.textureId = val.textureId
    size.value = val.textureSize
}

// 提交
const submit = async () => {

    const treeItem = objm.createdTreeItem(modelser2SceneTreeWrapper);
    treeItem.sceneObject = objm.createSceneObjectFromJson(eSGeoWater.value.json);

    const name = "水面修补"
    // @ts-ignore
    const num = getsceneObjNumfromSceneTree(treeItem.sceneObject.typeName, objm.modelser2SceneTreeWrapper);
    treeItem.name = `${name}(${num})`
    // @ts-ignore
    create();
};

onMounted(() => {
    create();
});
</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item1 {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
}


.btn1 {
    display: flex;
    justify-content: flex-end
        /* justify-content: space-between; */
}

.item2 {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
}

.fuc {
    display: flex;
}

.el-button {
    margin-left: 0px !important;
}

.edit {
    display: flex;
    gap: 20px;
    align-items: center;
}

.list-img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.choose {
    background: url("@/assets/cimrts/propPanel/choose.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
}

.texture-img {
    display: flex;
    align-items: center;

}

.el-input-number {
    width: 175px;
}

.beizhu {
    font-size: 13px;
    color: rgba(0, 0, 255, 1);
}
</style>